import { useMemo } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { Dropdown, Modal } from 'antd';
import { ExclamationCircleFilled } from '@ant-design/icons';
import './index.sass';


const Header = () => {
  const navigate = useNavigate();
  const menu = JSON.parse(sessionStorage.getItem('menu') || '[]');
  const username = 'admin';

  const tip = useMemo(() => {
    const tipList = [
      '夫学业在勤，功庸弗怠',
      '及时当勉励，岁月不待人',
      '伎工于习，事成于勉',
      '学问勤乃有，不勤腹空虚',
      '人生在勤，不索何获'
    ];
    const i = Math.floor(Math.random() * tipList.length);
    return `hi, ${username}, ${tipList[i]}`;
  }, []);

  const items = menu.filter((item: AnyObject) => item.postion === 'top').map((item: AnyObject) => ({
    label: (
      <Link to={item.url.slice(1)}>
        <span className={'iconfont ' + item.ico} />
        {item.name}
      </Link>
    ),
    key: item.id,
  }));

  const logout = () => Modal.confirm({
    title: '提示',
    icon: <ExclamationCircleFilled />,
    content: '确定要退出当前账号吗',
    onOk() {
      sessionStorage.clear();
      navigate('/');
    }
  });

  return (
    <header>
      <div className="l">
        <div className="logo" />
        <Link to="home" className="home">
          <span className="iconfont icon-shouye-shouye" />
          首页
        </Link>
        <div className="tip">{tip}</div>
      </div>
      <div className="r">
        <Dropdown menu={{ items }} trigger={['click']} overlayClassName="menu-dropdown">
          <button>
            <span className="iconfont icon-xitong" />
            设置
          </button>
        </Dropdown>
        <button className="logout" onClick={logout}>
          <span className="iconfont icon-tuichu" />
          退出登录
        </button>
      </div>
    </header>
  )
};

export default Header;
